<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.7.2.min.js"></script>
<style type="text/css">
.menu{ border:1px solid #999; border-radius:3px;}
.menu li{display:inline;margin-left:10px;}
.selectmenu{ position:relative;height:20px;line-height:20px; padding-bottom:10px;}
.listmenu{ position:absolute;width:90px; border:1px solid #999; z-index:999; list-style-type: none;left:-10px;top:25px;padding:0;}
.listmenu li{margin:0;display: block;padding: 0 0 0 10px;}
.down {                         
  width:0px;
  height:0px;
  border-top:5px solid #666;
  border-left:5px solid #fff;
  border-right:5px solid #fff;
  vertical-align:middle;display: inline-block;*display: inline;*zoom:1;*font-size:0px;
 }
 .up {                                       
  width:0px;
  height:0px;
  border-bottom:5px solid  #666;
  border-left:5px solid #fff;
  border-right:5px solid #fff;
   vertical-align:middle;display: inline-block;*display: inline;*zoom:1;*font-size:0px;
 }
</style>
<script>
$(function(){
	$('.selectmenu').find('ul').hide();
	$('.selectmenu').hover(function(){$(this).find('ul').show();$(this).find('span').removeClass('down').addClass('up');},
	function(){$(this).find('ul').hide();$(this).find('span').removeClass('up').addClass('down');});
	
	
	});
</script>
</head>

<body>
<div id="div">
<h4>此处显示  id "div" 的内容</h4>
<ul class="menu">
<li class="selectmenu">
<a href="#">菜单菜单</a><span class="down"></span>
<ul class="listmenu">
<li><a href="#">中国足球</a></li>
<li><a href="#">中国足球</a></li>
<li><a href="#">中国足球</a></li>
<li><a href="#">中国足球</a></li>
</ul>
</li>
<li><a href="#">菜单显示</a></li>
<li><a href="#">菜单显示</a></li>
<li class="selectmenu">
<a href="#">菜单显示</a><span class="down"></span>
<ul class="listmenu">
<li><a href="#">中国足球</a></li>
<li><a href="#">中国足球</a></li>
<li><a href="#">中国足球</a></li>
<li><a href="#">中国足球</a></li>
</ul>
</li>
<li class="selectmenu">
<a href="#">菜线序单</a><span class="down"></span>
<ul class="listmenu">
<li><a href="#">中国足球</a></li>
<li><a href="#">中国足球</a></li>
<li><a href="#">中国足球</a></li>
<li><a href="#">中国足球</a></li>
</ul>
</li>
<li class="selectmenu">
<a href="#">菜单</a><span class="down"></span>
<ul class="listmenu">
<li><a href="#">中国足球</a></li>
<li><a href="#">中国足球</a></li>
<li><a href="#">中国足球</a></li>
<li><a href="#">中国足球</a></li>
</ul>
</li>
</ul>
</div>
<body>
</body>
</html>
